<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Automatic/>
            </n-icon>
            <Handle id="DataCleaning-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="DataCleaning-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>数据清洗</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="数据清洗">
                <p>请选择所要清洗的字段列: </p>
                <n-select
                    v-model:value="field"
                    :options="props.data.data.title"
                    @update:value="popup.reopen"
                    multiple
                    placeholder="请选择所要清洗的字段列"
                    label-field="title"
                    value-field="key"
                />
                <br>
                <p>请选择所要清洗的内容: </p>
                <n-select
                    v-model:value="mode"
                    :options="modeArray"
                    @update:value="popup.reopen"
                    placeholder="请选择所要清洗的内容"
                />
                <br>
                <!--清洗空格-->
                <template v-if="mode==='spaces'">
                    删除内容前后空格(不对中间空格进行操作)
                </template>
                <!--清洗字符-->
                <template v-else-if="mode==='character'">
                    <n-radio-group v-model:value="characterMode" name="radioGroup">
                        <n-space vertical>
                            <div v-for="song in characterModeArray" :key="song.value">
                                <n-radio :value="song.value">
                                    {{ song.label }}
                                </n-radio>

                                <div v-show="song.value==='character'">
                                    <n-input
                                        v-model:value="character"
                                        type="text"
                                        placeholder="输入字符"
                                    />
                                </div>

                                <div v-show="song.value==='position'">
                                    <div class="position-div">
                                        <span>左起第</span>
                                        <n-input-number
                                            v-model:value="left_where"
                                            clearable
                                            placeholder="输入位置数(首位字符为1)"
                                        />
                                        <span>位</span>
                                    </div>
                                    <div class="position-div">
                                        <span>右起第</span>
                                        <n-input-number
                                            v-model:value="right_where"
                                            clearable
                                            placeholder="输入位置数(首位字符为1)"
                                        />
                                        <span>位</span>
                                    </div>
                                </div>
                            </div>

                        </n-space>
                    </n-radio-group>
                </template>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="clean">清洗</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>
import {Automatic} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";

const elements = useElementsStore()
const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data', 'id'])

// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            console.log(22)
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
// 获取上级节点数据
const getSuperiorData = () => {
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    window.$message.success("成功获取上级节点数据")
                    return
                }
            }
        }
    }
}
// 选中字段
const field = ref([])
// 选中方式
const modeArray = [
    {label: "清洗空格", value: "spaces"},
    {label: "清洗字符", value: "character"},
    {label: "非打印字符", value: "special_characters"},
]
const mode = ref("spaces")


/**
 * 清洗按钮
 */
const clean = () => {
    if (field.value.length === 0) {
        window.$message.warning("还没选择操作的列")
        return
    }
//     判断是清洗空格还是清洗字符
    if (mode.value === "spaces") {
        cleanSpace();
    } else if (mode.value === 'character') {
        cleanCharacter();
    } else if (mode.value === 'special_characters') {
        deleteSpecialCharacters()
    }
}
/**
 * 清洗空格
 */
const cleanSpace = () => {
    workApi.post("perform_tasks/delete_spaces", {
        data: props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value
            }
        }
    }).then(r => {
        props.data.data = r.data
    })
}

// 清洗字符
const characterModeArray = [
    {label: "按字符", value: "character"},
    {label: "按位置", value: "position"},
]
const characterMode = ref("character")
const character = ref("")
const left_where = ref(null)
const right_where = ref(null)
/**
 * 清洗字符
 */
const cleanCharacter = () => {
    // 判断按位置还是按字符
    const type = {
        character: {
            url: "perform_tasks/delete_character",
            dataChildren: {
                operation: {
                    row: {
                        "serial_number": []
                    },
                    column: {
                        serial_number: field.value,
                        character: character.value
                    }
                }
            }
        },
        position: {
            url: "perform_tasks/delete_position",
            dataChildren: {
                operation: {
                    row: {
                        "serial_number": []
                    },
                    column: {
                        serial_number: field.value,
                        left_where: left_where.value,
                        right_where: right_where.value
                    }
                }
            }
        }
    }
    console.log()
    workApi.post(type[characterMode.value].url, {
        data: props.data.data,
        operation: {...type[characterMode.value].dataChildren.operation}
    }).then(r => {
        props.data.data = r.data
    })
}


const deleteSpecialCharacters = () => {
    workApi.post("perform_tasks/delete_special_characters", {
        data: props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value
            }
        }
    }).then(r => {
        props.data.data = r.data
    })
}

</script>

<style scoped lang="less">
.n-card {
    width: 500px;

    .n-radio {
        margin: 10px 0 0 0;
    }

    .position-div {
        display: flex;
        align-items: center;

        > div {
            margin: 5px 10px;
        }
    }
}
</style>